<template>
  <div class="location-point-container">
    <div class="top">
      <span
        :class="{ selected: coordType === 'D' }"
        @click="changeCoordType('D')"
        >度</span
      >
      <span
        :class="{ selected: coordType === 'DM' }"
        @click="changeCoordType('DM')"
        >度分</span
      >
      <span
        :class="{ selected: coordType === 'DMS' }"
        @click="changeCoordType('DMS')"
        >度分秒</span
      >
    </div>
    <div class="center">
      <div class="coords-panel">
        <span>纬度：</span>
        <div class="d-m-s-input">
          <input v-model="latD" min="0" max="90" type="number" />
          <span>°</span>
          <input
            v-if="coordType === 'DM' || coordType === 'DMS'"
            v-model="latM"
            min="0"
            max="60"
            type="number"
          />
          <span v-if="coordType === 'DM' || coordType === 'DMS'">′</span>
          <input
            v-if="coordType === 'DMS'"
            v-model="latS"
            min="0"
            max="60"
            type="number"
          />
          <span v-if="coordType === 'DMS'">″</span>
        </div>
        <div class="coord-type" @click="changeLatType">
          <div :class="{ selected: latType === 'N' }">N</div>
          <div :class="{ selected: latType === 'S' }">S</div>
        </div>
      </div>
      <div class="coords-panel">
        <span>经度：</span>
        <div class="d-m-s-input">
          <input v-model="lngD" min="0" max="180" type="number" />
          <span>°</span>
          <input
            v-if="coordType === 'DM' || coordType === 'DMS'"
            v-model="lngM"
            min="0"
            max="60"
            type="number"
          />
          <span v-if="coordType === 'DM' || coordType === 'DMS'">′</span>
          <input
            v-if="coordType === 'DMS'"
            v-model="lngS"
            min="0"
            max="60"
            type="number"
          />
          <span v-if="coordType === 'DMS'">″</span>
        </div>
        <div class="coord-type" @click="changeLngType">
          <div :class="{ selected: lngType === 'E' }">E</div>
          <div :class="{ selected: lngType === 'W' }">W</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <el-button type="primary" class="ok-btn" @click="doLocate"
        >定位</el-button
      >
    </div>
    <div></div>
  </div>
</template>
<script>
export default {
  props: {
    // 工具数组
    // 格式如：[{toolKey:"ceshi1",toolName:"测试1"，toolIconClass:"iconfont icon-rate"}]
    toolList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      lngD: undefined,
      lngM: undefined,
      lngS: undefined,
      latD: undefined,
      latM: undefined,
      latS: undefined,
      coordType: "DMS", // DMS、DM、D(度分秒、度分、度)
      lngType: "E", // E、W（东经、西经）
      latType: "N", // N、S（北纬、南纬）
    };
  },
  watch: {
    lngD: function (val, oldVal) {
      val = parseInt(val);
      if (val > 180) {
        val = 180;
      }
      if (val < 0) {
        val = 0;
      }
      this.lngD = val;
    },
    lngM: function (val, oldVal) {
      val = parseInt(val);
      if (val > 60) {
        val = 60;
      }
      if (val < 0) {
        val = 0;
      }
      this.lngM = val;
    },
    lngS: function (val, oldVal) {
      if (this.getNumPrecision(val) > 4) {
        // console.log(Number(val).toFixed(4));
        val = parseFloat(Number(val).toFixed(4));
      } else {
        val = parseFloat(val);
      }
      if (val > 60) {
        val = 60;
      }
      if (val < 0) {
        val = 0;
      }

      this.lngS = val;
    },
    latD: function (val, oldVal) {
      val = parseInt(val);
      if (val > 90) {
        val = 90;
      }
      if (val < 0) {
        val = 0;
      }
      this.latD = val;
    },
    latM: function (val, oldVal) {
      val = parseInt(val);
      if (val > 60) {
        val = 60;
      }
      if (val < 0) {
        val = 0;
      }
      this.latM = val;
    },
    latS: function (val, oldVal) {
      if (this.getNumPrecision(val) > 4) {
        // console.log(Number(val).toFixed(4));
        val = parseFloat(Number(val).toFixed(4));
      } else {
        val = parseFloat(val);
      }
      if (val > 60) {
        val = 60;
      }
      if (val < 0) {
        val = 0;
      }
      this.latS = val;
    },
  },
  mounted() {},
  destroy() {},
  methods: {
    getNumPrecision(num) {
      if (num) {
        const numStrArray = num.toString().split(".");
        if (numStrArray.length > 0 && numStrArray[1]) {
          return numStrArray[1].length;
        } else {
          return 0;
        }
      } else {
        return 0;
      }
    },
    // 切换经度类型
    changeLngType() {
      this.lngType = this.lngType === "E" ? "W" : "E";
    },
    // 切换纬度类型
    changeLatType() {
      this.latType = this.latType === "N" ? "S" : "N";
    },
    // 更换坐标类型
    changeCoordType(type) {
      this.coordType = type;
    },
    // 检查经纬度输入
    checkLngLat(nums) {
      for (let i = 0; i < nums.length; i++) {
        if (!nums[i] && nums[i] != 0) {
          this.$message.warning("请输入完整的经纬度坐标！");
          return false;
        }
      }
      return true;
    },
    doLocate() {
      let lngD, lngM, lngS, latD, latM, latS;
      // if (
      //   (!lngD && lngD != 0) ||
      //   (!lngM && lngM != 0) ||
      //   (!lngS && lngS != 0) ||
      //   (!latD && latD != 0) ||
      //   (!latM && latM != 0) ||
      //   (!latS && latS != 0)
      // ) {
      //   this.$message.warning("请输入完整的经纬度坐标！");
      //   return;
      // }
      if (this.coordType === "D") {
        if (!this.checkLngLat([this.lngD, this.latD])) {
          return;
        }
        lngD = this.lngD ? this.lngD : 0;
        latD = this.latD ? this.latD : 0;
        lngM = lngS = latM = latS = 0;
      }

      if (this.coordType === "DM") {
        if (!this.checkLngLat([this.lngD, this.latD, this.lngM, this.latM])) {
          return;
        }
        lngD = this.lngD ? this.lngD : 0;
        latD = this.latD ? this.latD : 0;
        lngM = this.lngM ? this.lngM : 0;
        latM = this.latM ? this.latM : 0;
        lngS = latS = 0;
      }

      if (this.coordType === "DMS") {
        console.log(this.lngM, this.latM, this.lngS, this.latS);
        if (
          !this.checkLngLat([
            this.lngD,
            this.latD,
            this.lngM,
            this.latM,
            this.lngS,
            this.latS,
          ])
        ) {
          return;
        }
        lngD = this.lngD ? this.lngD : 0;
        latD = this.latD ? this.latD : 0;
        lngM = this.lngM ? this.lngM : 0;
        latM = this.latM ? this.latM : 0;
        lngS = this.lngS ? this.lngS : 0;
        latS = this.latS ? this.latS : 0;
      }
      this.$emit(
        "confirm",
        {
          lngD,
          lngM,
          lngS,
          latD,
          latM,
          latS,
        },
        this.lngType,
        this.latType
      );
    },
  },
};
</script>
<style lang="scss" scoped>
// 去掉input number框后面的上下箭头按钮
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.location-point-container {
  padding: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    line-height: 25px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #d8d8d8;

    span {
      width: 80px;
      height: 30px;
      background: #ffffff;
      border-radius: 3px;
      border: 1px solid #004aaa;
      color: #004aaa;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
    }
    // &:hover {
    //   background: #004aaa;
    //   color: #ffffff;
    // }
    .selected {
      background: #004aaa;
      color: #ffffff;
    }
  }

  .center {
    padding: 18px 0 18px 0;
    .coords-panel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;

      font-size: 14px;
      font-weight: 400;
      color: #333333;
      &:first-child {
        margin-bottom: 16px;
      }
      .d-m-s-input {
        flex-grow: 1;
        display: flex;
        justify-content: space-around;
        input {
          // flex-grow: 1;
          flex: 1 0; // 曾1不缩
          min-width: 60px;
          height: 30px;
          background: #ffffff;
          border-radius: 3px;
          border: 1px solid #004aaa;
        }
        span {
          padding: 0 2px 0 2px;
          font-size: 18px;
          flex: 0 0; // 不曾不缩
        }
      }
      .coord-type {
        flex-grow: 0;
        width: 42px;
        display: flex;
        justify-content: center;
        text-align: center;
        line-height: 27px;
        color: #ffffff;
        border: 1px solid #004aaa;
        cursor: pointer;
        div {
          width: 21px;
          height: 30px;
          // &:first-child {
          //   background-color: #004aaa;
          // }
        }
        .selected {
          background-color: #004aaa;
        }
      }
    }
  }

  .bottom {
    .ok-btn {
      width: 100%;
      padding: 8px 20px;
      background: #004aaa;
      border-color: #004aaa;
    }
  }
}
</style>
